<!-- 购物卡结佣管理-购物卡发货-发货单详情和打印-->
<template>
    <div class="shoppingCardSendDetail">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/shoppingCardSend' }">购物卡发货</el-breadcrumb-item>
            <el-breadcrumb-item>{{type === 'print' ? '打印发货单' : '查看发货单'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-if="type === 'print'">
            <!--<div>打印配置：</div>
            <el-form :inline="true" :model="printConfig">
                <el-form-item label="首页打印数据条数:">
                    <el-input size="mini" class="w50" v-model="printConfig.homeSize" placeholder="请输入打印数据条数"></el-input>
                </el-form-item>
                <el-form-item label="非首页打印数据条数:">
                    <el-input size="mini" class="w50" v-model="printConfig.size" placeholder="请输入打印数据条数"></el-input>
                </el-form-item>
            </el-form>-->
            <el-button type="primary" class="mb20" @click="print">打印预览</el-button>
        </div>
        <div :class="type === 'print' ? 'tableArea printArea' : 'tableArea'" id="printArea">
            <h3 style="text-align: center; font-size: 26px;">购物卡发货单</h3>
            <div>单号：{{orderInfo.deliveryNo}}</div>
            <table class="tableTitle" border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <th colspan="4">所属楼盘：{{orderInfo.devName}}</th>
                </tr>
                <tr>
                    <td>购物卡数量：</td>
                    <td>{{orderInfo.cardCount}}张</td>
                    <td>金额合计：</td>
                    <td>￥{{orderInfo.totalAmount | formatMoney}}</td>
                </tr>
                <tr>
                    <td>项目收货人：</td>
                    <td>{{orderInfo.projectConsignee}}</td>
                    <td>发货时间：</td>
                    <td>{{orderInfo.deliveryTime}}</td>
                </tr>
                <tr>
                    <td>物流单号：</td>
                    <td>{{orderInfo.logisticsNo}}</td>
                    <td>物流公司：</td>
                    <td>{{orderInfo.logisticsCompany}}</td>
                </tr>
                <tr>
                    <td>来源类别：</td>
                    <td>{{["经纪人佣金", "经纪人奖励", "项目推荐奖"][orderInfo.sourceCategories]}}</td>
                    <td>发货人：</td>
                    <td>{{orderInfo.creatorName}}</td>
                </tr>
                <tr style="border-bottom: 0 solid #fff;">
                    <th colspan="4">购物卡明细</th>
                </tr>
            </table>
            <!--:style="{
                   'page-break-after': 'always',
                   'position': 'relative',
                   'height': index === 0 ? '715px': '1050px'
                 }"-->
            <div v-if="type === 'print'">
                <div class="printTable"
                     v-for="(item,index) in totalTableDataArr"
                     style="page-break-after: always"
                     :key="index">
                    <table class="tableContent" border="1" cellpadding="0" cellspacing="0">
                        <tr>
                            <th style="font-size: 12px;">序号</th>
                            <th style="font-size: 12px;">经纪人姓名</th>
                            <th style="font-size: 12px;">所属公司</th>
                            <th style="font-size: 12px;">面额</th>
                            <th style="font-size: 12px;">订单信息</th>
                        </tr>
                        <tr v-for="(subItem, subIndex) in item" :key="subIndex">
                            <td style="font-size: 12px;" v-if="index">
                                {{(index-1) * printConfig.size + subIndex + 1 + +printConfig.homeSize}}
                            </td>
                            <td style="font-size: 12px;" v-else>{{ subIndex + 1 }}</td>
                            <td style="font-size: 12px;">{{subItem.brokerName}}</td>
                            <td style="font-size: 12px;">{{subItem.companyName | textOverflow}}</td>
                            <td style="font-size: 12px;">{{subItem.cardDenomination | formatMoney}}</td>
                            <td style="font-size: 12px;">{{subItem.houseNum}}</td>
                        </tr>
                    </table>
                    <p style="display: flex; justify-content: space-between; width: 100%; font-size: 14px;">
                        <span style="flex: 1;">打印时间：{{printTime}}</span>
                        <span style="margin: 0 10px; width: 150px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">打印人：{{printUser}}</span>
                        <span style="flex: 1; text-align: right;">第{{index+1}}页/共{{totalTableDataArr.length}}页</span>
                    </p>
                </div>
            </div>
            <el-table v-else class='elTable' :data="tableData" border style="width: 100%">
                <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                <el-table-column align="center" prop="brokerName" label="姓名"></el-table-column>
                <el-table-column align="center" prop="companyName" label="所属公司">
                    <template slot-scope="scope">{{scope.row.companyName | textOverflow}}</template>
                </el-table-column>
                <el-table-column align="center" prop="typeName" label="购物卡类别"></el-table-column>
                <el-table-column align="center" prop="cardCode" label="卡号"></el-table-column>
                <el-table-column align="center" prop="cardDenomination" label="面额">
                    <template slot-scope="scope">{{scope.row.cardDenomination | formatMoney}}</template>
                </el-table-column>
                <el-table-column align="center" prop="houseNum" label="订单信息"></el-table-column>
            </el-table>
        </div>
        <div class="pagebar" v-if="type !== 'print'">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    import utils from "@/common/utils.js";

    export default {
        name: 'shoppingCardSendDetail',
        data() {
            return {
                printUser: JSON.parse(sessionStorage.getItem("cmsUser")).name,
                printTime: utils.getTimeString(new Date()),
                deliveryOrderId: "",
                orderInfo: {},
                tableData: [],
                totalTableData: [],
                tableConfig: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                totalTableDataArr: [],
                type: 'detail',
                printConfig: {
                    homeSize: 16,
                    size: 26
                }
            }
        },
        created() {
            this.type = this.$route.query.type;
            this.deliveryOrderId = this.$route.query.id;
            this.getTableList()
        },
        mounted() {

        },
        methods: {
            splitArray() {
                let totalTableData = JSON.parse(JSON.stringify(this.totalTableData));
                let totalTableDataArr = [
                    totalTableData.splice(0, this.printConfig.homeSize)
                ];
                totalTableData.forEach((item, index) => {
                    let target = Math.floor(index / this.printConfig.size) + 1;
                    if (index % this.printConfig.size === 0) {
                        totalTableDataArr[target] = [item]
                    } else {
                        totalTableDataArr[target].push(item)
                    }
                });
                this.totalTableDataArr = totalTableDataArr;
                this.tableData = this.totalTableData.slice(0, this.tableConfig.pageSize);
            },

            handleSizeChange(size) {
                this.tableConfig.pageNum = 1;
                this.tableConfig.pageSize = size;
                this.getTableList()
                // this.tableData = this.totalTableData.slice((this.tableConfig.pageNum - 1) * this.tableConfig.pageSize, this.tableConfig.pageNum * this.tableConfig.pageSize);
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page;
                this.getTableList()
                // this.tableData = this.totalTableData.slice((this.tableConfig.pageNum - 1) * this.tableConfig.pageSize, this.tableConfig.pageNum * this.tableConfig.pageSize);
            },
            getTableList() {
                if (this.type === 'print') {
                    this.axios.post(api.deliveryOrderDeliveryOrderPrint, {
                        deliveryOrderId: this.deliveryOrderId
                    }).then((res) => {
                        this.orderInfo = res.data.data;
                        this.totalTableData = res.data.data.orderList;
                        this.tableConfig.totalSize = this.totalTableData.length;
                        this.splitArray();
                    })
                } else {
                    this.axios.post(api.deliveryOrderDeliveryOrderDetail, {
                        deliveryOrderId: this.deliveryOrderId,
                        pageNum: this.tableConfig.pageNum,
                        pageSize: this.tableConfig.pageSize,
                    }).then((res) => {
                        this.orderInfo = res.data.data;
                        this.tableData = res.data.data.shopList.data.list;
                        this.tableConfig.totalSize = res.data.data.shopList.data.total;
                    })
                }
            },
            print() {
                //this.splitArray();

                this.axios.post(api.deliveryOrderGetNowTime, {}).then((res) => {
                    if (res.data.code === 200) {
                        this.printTime = res.data.data.nowTime;
                    } else {
                        this.printTime = utils.getTimeString(new Date())
                    }
                    setTimeout(() => {
                        const myWindow = window.open('', '打印预览');
                        const bodyHtml = window.document.getElementById('printArea').innerHTML;
                        let headHtml = document.head.innerHTML;
                        headHtml = headHtml.replace('screen', 'screen, print');
                        //写入文档流
                        myWindow.document.write('<html>');
                        // myWindow.document.write(headHtml);
                        myWindow.document.write(headHtml + '<style>@media screen {body {display: none}}</style>');
                        myWindow.document.write('<body>');
                        myWindow.document.write(bodyHtml);
                        //写入打印代码
                        myWindow.document.write('<script>setTimeout(function() {window.print(); window.close();}, 500)</');
                        myWindow.document.write('script>');
                        myWindow.document.write('</body></html>');
                    }, 100)
                })
            }
        },
        components: {},
        computed: {},
        filters: {
            textOverflow(val) {
                if (val && val.length > 20) {
                    return val.slice(0, 18) + "..."
                } else {
                    return val
                }
            },
            formatMoney(money) {
                return utils.formatMoney(money)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
    .tableArea {
        padding: 10px;
    }

    .printArea {
        border: 1px dashed #aaa;
    }

    .tableContent, .tableTitle {
        width: 100%;
        border: 1px solid #ebeef5;
        border-collapse: collapse;
        td, th {
            padding: 10px;
        }
    }

    .tableContent {
        td {
            text-align: center;
        }
    }

    .tableTitle {
        margin-top: 10px;
        th {
            text-align: left;
        }
        tr {
            td:nth-child(odd) {
                text-align: right;
                width: 20%;
            }
            td:nth-child(even) {
                text-align: center;
            }
        }
    }

    @media print {
        .elTable {
            display: none;
        }
    }

    @media screen {
        .printTable {
            //display: none;
        }

    }
</style>
